<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格导入示例</title>
</head>
<body>
    <h1>表格导入示例</h1>

    <div>
        <span>不带表头：</span>
        <input type="file" name="" id="file">
    </div>
    <div>
        <span>带表头(英文)：</span>
        <input type="file" name="" id="file2">
    </div>
    <div>
        <span>带表头（中文）：</span>
        <input type="file" name="" id="file3">
    </div>
</body>
</html>
<script src="./xlsx.full.min.js"></script>
<script src="./xlsxTojson.js"></script>
<script>
    //不带表头
    var fileNode = document.querySelector("#file")
    fileNode.addEventListener('change',function(){
        //当前文件
        var file = fileNode.files[0]
        //调用方法
        xlsxTojson(file)
    })

    //带表头(英文)
    var fileNode2 = document.querySelector("#file2")
    fileNode2.addEventListener('change',function(){
        //当前文件
        var file = fileNode2.files[0]
        
        //调用方法
        xlsxTojson(file, {
            Thead: true,//带表头
        })
    })

    //带表头（中文）
    var fileNode3 = document.querySelector("#file3")
    fileNode3.addEventListener('change',function(){
        //当前文件
        var file = fileNode3.files[0]
        //调用方法
        xlsxTojson(file, {
            Thead: true,//带表头
            TheadConfig: {
                id: "序号",
                name: "姓名",
                age: "年龄"
            },//表头自定义配置
        })
    })
</script>